<script setup lang="ts">
import type { IGoods } from '@/biz/repo/good'
import CartControll from './CartControll.vue'
import { useRouter } from 'vue-router'
interface IProps {
  data: IGoods
  allow: boolean
}
const props = defineProps<IProps>()
const router = useRouter()
const gotoGoods = () => {
  if (props.allow) {
    router.push({
      name: 'goods',
      params: { id: props.data.id }
    })
  }
}
</script>

<template>
  <div class="shop-goods-item" @click="gotoGoods">
    <img class="img" v-lazy="data.imgUrl" />
    <div class="content">
      <div class="content__title">{{ data.name }}</div>
      <div class="content__tips">{{ data.tips }}</div>
      <div class="content__sale">
        <span class="content__sale__number">月售{{ data.sellCount }}份</span>
        <span class="content__sale__score">评分 {{ data.rating }}</span>
      </div>
      <div class="content__price">
        <span class="content__price__yen">&yen;</span>{{ data.price }}
        <span class="content__price__old">&yen;{{ data.oldPrice }}</span>
      </div>
      <div class="content__cart">
        <CartControll :data="data" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '@/assets/mixins.scss';
.shop-goods-item {
  display: flex;
  font-size: 12px;
  margin-bottom: 20px;
  .img {
    width: 85px;
    height: 85px;
    border-radius: 5px;
  }
  .content {
    flex: 1;
    margin-left: 10px;
    position: relative;
    &__title {
      font-size: 15px;
      font-weight: bold;
      margin-bottom: 4px;
      width: 180px;
      @include ellipse;
    }
    &__tips {
      color: gray;
      margin-bottom: 4px;
      width: 180px;
      @include ellipse;
    }
    &__sale {
      color: gray;
      margin-bottom: 4px;
      &__number {
        margin-right: 6px;
      }
    }
    &__price {
      margin-top: 14px;
      color: red;
      font-size: 18px;
      display: flex;
      align-items: baseline;
      position: absolute;
      bottom: 0;
      &__yen {
        font-size: 13px;
      }
      &__old {
        color: gray;
        font-size: 12px;
        margin-left: 4px;
        text-decoration: line-through;
      }
    }
    &__cart {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}
</style>
